/* text */
.txt-blue {
  color: $blue;
}
.txt-blueDark {
  color: $blueDark;
}
.txt-blueLight {
  color: $blueLight;
}

.txt-red {
  color: $red;
}
.txt-redDark {
  color: $redDark;
}
.txt-redLight {
  color: $redLight;
}

.txt-green {
  color: $green;
}
.txt-greenDark {
  color: $greenDark;
}
.txt-greenLight {
  color: $greenLight;
}

.txt-orange {
  color: $orange;
}
.txt-orangeDark {
  color: $orangeDark;
}
.txt-orangeLight {
  color: $orangeLight;
}

.txt-littleBlue{
  color: $littleBlue;
}
.txt-littleGreen{
  color: $littleGreen;
}
.txt-littleRed{
  color: $littleRed;
}
.txt-littleOrange{
  color: $littleOrange;
}

.txt-themePurple {
  color: $themePurple;
}
.txt-themeRed {
  color: $themeRed;
}
.txt-themeOrange {
  color: $themeOrange;
}
.txt-themeBlue {
  color: $themeBlue;
}
.txt-themeGreen {
  color: $themeGreen;
}

.txt-fff {
  color: #fff;
}

.txt-m1 {
  color: $m1;
}
.txt-m2 {
  color: $m2;
}
.txt-h1 {
  color: $h1;
}

.txt-h3 {
  color: $h3;
}

.txt-333 {
  color: #333;
}

.txt-777 {
  color: #777;
}

.txt-ccc {
  color: #ccc;
}

.txt-g2 {
  color: $g2;
}

.txt-g3 {
  color: $g3;
}

.txt-dark1 {
  color: $dark1;
}

.txt-dark2 {
  color: $dark2;
}
.txt-dark3 {
  color: $dark3;
}
.txt-dark5 {
  color: $dark5;
}
.txt-dark8 {
  color: $dark8;
}

/* bg */
.bg-none {
  background-color: transparent;
}

.bg-red {
  background-color: $red;
}
.bg-redDark {
  background-color: $redDark;
}
.bg-redLight {
  background-color: $redLight;
}
.bg-orange {
  background-color: $orange;
}
.bg-orangeDark {
  background-color: $orangeDark;
}
.bg-orangeLight {
  background-color: $orangeLight;
}
.bg-blue {
  background-color: $blue;
}
.bg-blueDark {
  background-color: $blueDark;
}
.bg-blueLight {
  background-color: $blueLight;
}
.bg-green {
  background-color: $green;
}
.bg-greenDark {
  background-color: $greenDark;
}
.bg-greenLight {
  background-color: $greenLight;
}

.bg-littleBlue{
  background-color: $littleBlue;
}
.bg-littleGreen{
  background-color: $littleGreen;
}
.bg-littleRed{
  background-color: $littleRed;
}
.bg-littleOrange{
  background-color: $littleOrange;
}

.bg-themeGreen {
  background-color: $themeGreen;
}
.bg-linear-green {
  background-image: $linear-green;
}

.bg-fff {
  background-color: #fff;
}

.bg-f0 {
  background-color: #f0f0f0;
}
.bg-dark1 {
  background-color: $dark1;
}
.bg-dark2 {
  background-color: $dark2;
}
.bg-dark3 {
  background-color: $dark3;
}
.bg-dark5 {
  background-color: $dark5;
}
.bg-dark8 {
  background-color: $dark8;
}
/* hover bg */
.hover-fff{
  transition: $trans1;
  &:hover {
    background-color: #fff;
  }
}
.hover-f0 {
  transition: $trans1;
  &:hover {
    background-color: #f0f0f0;
  }
}
.hover-01 {
  transition: $trans1;
  &:hover {
    background-color: $dark1;
  }
}
.hover-red{
  transition: $trans1;
  &:hover{
    color: #fff;
    background-color: $red;
  }
}
.hover-txt-red{
  transition: $trans1;
  &:hover{
    color: $red;
  }
}
.hover-blue{
  transition: $trans1;
  &:hover{
    color: #fff;
    background-color: $blue;
  }
}
.hover-littleBlue{
  transition: $trans1;
  &:hover{
    background-color: $littleBlue;
  }
}
.hover-green{
  transition: $trans1;
  &:hover{
    color: #fff;
    background-color: $green;
  }
}
.hover-orange{
  transition: $trans1;
  &:hover{
    color: #fff;
    background-color: $orange;
  }
}
.hover-white1{
  transition: $trans1;
  &:hover{
    background-color: $white1;
  }
}
.hover-white2{
  transition: $trans1;
  &:hover{
    background-color: $white2;
  }
}

.shadow-dark1 {
  box-shadow: rgba(0, 0, 0, 0.1) 0 0.5rem 0.5rem;
}

.shadow-green1 {
  box-shadow: rgba(103, 194, 58, 0.1) 0 0.5rem 0.5rem;
}

.shadow-blue005 {
  box-shadow: $blue 0 0 0.5rem;
}
.shadow-blue1 {
  box-shadow: $blue1 0 0 1rem;
}
